<template>
  <div class="view">
    <div class="container">
      <!--带筛选表格组件-->
      <table-list
        :data="listData"
        :column-cfg="columnCfg"
        :total-size="totalSize"
        :page-size="filterParams.pageSize"
        :loading="dataLoading"
        @refresh-list="getList"
        @edit-item="handleEditItem"
        @delete-item="handleDeleteItem"
      >
        <div class="view-button">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handleItemAdd"
            >新增角色
          </el-button>
        </div>
      </table-list>
    </div>
    <!--  详情对话框  -->
    <item-detail ref="itemDetail" @data-change="getList"></item-detail>
  </div>
</template>

<script>
import TableList from "@/components/TableList/index";
import ItemDetail from "./components/ItemDetail";

import { list, batchDelete } from "@/api/system/role";
import ListAction from "@/views/_mixins/list-action";

export default {
  name: "RoleManage",
  mixins: [ListAction],
  components: {
    TableList,
    ItemDetail,
  },
  props: {},
  data() {
    return {
      list: list,
      batchDelete: batchDelete,
      idLabel: "roleId",
      deleteTip: "此操作将永久删除该角色, 是否继续?",
      filterParams: { pageSize: 10 }, //筛选条件，每次更新会保存使用的筛选条件
      columnCfg: {
        roleName: { label: "角色名称", filter: { type: "input" } },
        description: { label: "角色描述" },
        createTime: { label: "创建时间" },
        ":action": {
          label: "操作",
          actionArr: [
            {
              label: "编辑",
              event: "edit-item",
              btnType: "",
            },
            {
              label: "删除",
              event: "delete-item",
              btnType: "danger",
            },
          ],
        },
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 16px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
